<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="名称"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleQuery()"> 查询 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="level1"
        :loading="loading"
        :pagination="false"
        @change="handleTableChange"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar" />
        </template>
        <template v-slot:category="{ text, record }">
          <span
            >{{ getCategoryName(record.category1Id) }} /
            {{ getCategoryName(record.category2Id) }}</span
          >
        </template>
        <template v-slot:action="{ record }">
          <a-space size="small">
            <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
            <a-popconfirm
              title="删除后不可恢复，确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
            >
              <a-button type="primary" danger> 删除 </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal
    title="分类表单"
    v-model:visible="modalVisible"
    :confirm-loading="modalLoading"
    @ok="handleModalOk"
  >
    <a-form
      :model="category"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="名称">
        <a-input v-model:value="category.name" />
      </a-form-item>
      <a-form-item label="父分类名称">
        <a-select ref="select" v-model:value="category.parent">
          <a-select-option value="0">无</a-select-option>
          <a-select-option
            v-for="c in level1"
            :key="c.id"
            :value="c.id"
            :disabled="category.id === c.id"
          >
            {{ c.name }}
          </a-select-option>
        </a-select>
        <a-input v-model:value="category.parent" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="category.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";
import { Tool } from "@/util/tool";

const text = ref("1");
const param = ref();
param.value = {};
const categorys = ref();

const loading = ref(false);

const columns = [
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "父分类名称",
    dataIndex: "parent",
  },
  {
    title: "排序",
    dataIndex: "sort",
  },
  {
    title: "Action",
    key: "action",
    slots: { customRender: "action" },
  },
];

// -------- 表单 ---------
/**
 * 数组，[100, 101]对应：前端开发 / Vue
 */
const categoryIds = ref();
const category = ref();
const modalVisible = ref(false);
const modalLoading = ref(false);
const level1 = ref();

const handleModalOk = () => {
  modalLoading.value = true;
  // category.value.category1Id = categoryIds.value[0];
  // category.value.category2Id = categoryIds.value[1];
  console.log(category.value);
  axios.post("/category/save", category.value).then((response) => {
    modalLoading.value = false;
    const data = response.data; // data = commonResp
    if (data.success) {
      modalVisible.value = false;

      // 重新加载列表
      handleQuery({});
    } else {
      message.error(data.message);
    }
  });
};

/**
 * 编辑
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const edit = (record: any) => {
  console.log("-------------record:", record);
  console.log("-------------record category:", category.value);

  modalVisible.value = true;
  category.value = Tool.copy(record);
  console.log("-------------copy record:", category.value);
  categoryIds.value = [];
};
/**
 * 新增
 */
const add = () => {
  modalVisible.value = true;
  category.value = {};
};

const handleDelete = (id: number) => {
  axios.delete("/category/delete/" + id).then((response) => {
    const data = response.data; // data = commonResp
    if (data.success) {
      // 重新加载列表
      handleQuery({});
    } else {
      message.error(data.message);
    }
  });
};

// const level1 = ref();
// let categorys: any;
/**
 * 查询所有分类
 **/
// const handleQueryCategory = () => {
//   loading.value = true;
//   axios.get("/category/all").then((response) => {
//     loading.value = false;
//     const data = response.data;
//     if (data.success) {
//       categorys = data.content;
//       console.log("原始数组：", categorys);

//       level1.value = [];
//       // level1.value = Tool.array2Tree(categorys, 0);
//       console.log("树形结构：", level1.value);

//       // 加载完分类后，再加载分类，否则如果分类树加载很慢，则分类渲染会报错
//       handleQuery({
//         page: 1,
//       });
//     } else {
//       message.error(data.message);
//     }
//   });
// };

const getCategoryName = (cid: number) => {
  // console.log(cid)
  let result = "";
  categorys.value.forEach((item: any) => {
    if (item.id === cid) {
      // return item.name; // 注意，这里直接return不起作用
      result = item.name;
    }
  });
  return result;
};

/**
 * 数据查询
 **/
const handleQuery = () => {
  loading.value = true;
  // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
  categorys.value = [];
  level1.value = [];
  axios.get("/category/all").then((response) => {
    loading.value = false;
    const data = response.data;
    if (data.success) {
      categorys.value = data.content;
      // 转换为树形结构，默认根级id 是 0
      level1.value = [];
      level1.value = Tool.array2Tree(categorys.value, 0);
    } else {
      message.error(data.message);
    }
  });
};

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>
